<template>
  <div>
    <div class="link-input">
      <div v-for="(item,index) in incomeDetailList" :key="index" class="item-wrap">
        <div class="item">
          <el-input
            v-inputFocus="item.autofocus || false"
            v-model="item.value"
            :class="{'is-error':errIds.includes(item._uuid)}"
            size="small"
            class="width240"
            maxlength="20"
            placeholder="请输入收入细项"
            @blur="inputBlur"/>
          <span class="del" @click="toDelete(index)">删除</span>
        </div>
        <span v-if="errIds.includes(item._uuid)" :class="{'err-txt':errIds.includes(item._uuid)}">请输入收入细项</span>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'IncomeDetail',
  directives: {
    inputFocus: {
      inserted(el, binding) {
        if (binding.value) {
          el.querySelector('.el-input__inner').focus();
        }
      }
    }
  },
  props: {
    incomeDetailList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      errIds: []
    };
  },
  methods: {
    validate() {
      const errArr = this.incomeDetailList.filter(el => !el.value);
      let errIds = [];
      errIds = errArr.map(el => el._uuid);
      this.errIds = errIds;
      if (errArr.length) {
        return false;
      }
      return true;
    },
    clearError() {
      this.errIds = [];
    },
    inputBlur() {
      this.errIds = [];
    },
    addItem() {
      this.$emit('addItem');
    },
    toDelete(index) {
      if (this.incomeDetailList.length === 1) {
        this.$message.error('至少需要一个收入细项');
        return;
      }
      this.$emit('toDelete', index);
    }
  }
};
</script>
<style lang="scss" scoped>
  .item-wrap{
    position: relative;
  }
  .item{
    display: flex;
    align-items: center;
    margin-bottom: 22px;
  }
  .is-error{
  &::v-deep {
    .el-input__inner {
      border-color: red !important;
    }
    .el-textarea__inner{
      border-color: red !important;
    }
  }
  }
  .width240 {
    width: 240px;
    & ::v-deep {
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .err-txt{
    position: absolute;
    top: 100%;
    left: 0;
    line-height: 1;
    font-size: 12px;
    color: #F56C6C;
    padding-top: 4px;
  }
  .del{
    flex: 1;
    color: #192452;
    margin-left: 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
  }
</style>
